@use 'sass:math';
@use '../tp';

.#{tp.$prefix}-p2dv {
	position: relative;

	// Head
	&_h {
		display: flex;
	}
	// Button
	&_b {
		@extend %tp-button;

		height: tp.cssVar('container-unit-size');
		margin-right: 4px;
		position: relative;
		width: tp.cssVar('container-unit-size');

		svg {
			display: block;
			height: 16px;
			left: 50%;
			margin-left: math.div(-16px, 2);
			margin-top: math.div(-16px, 2);
			position: absolute;
			top: 50%;
			width: 16px;

			path {
				stroke: currentColor;
				stroke-width: 2;
			}
			circle {
				fill: currentColor;
			}
		}
	}
	// Text
	&_t {
		flex: 1;
	}
	// Inline picker
	&_p {
		height: 0;
		margin-top: 0;
		opacity: 0;
		overflow: hidden;
		transition: height tp.$fold-transition-duration ease-in-out,
			opacity tp.$fold-transition-duration linear,
			margin tp.$fold-transition-duration ease-in-out;
	}
	&#{&}-expanded &_p {
		margin-top: tp.cssVar('container-unit-spacing');
		opacity: 1;
	}

	// Popup
	.#{tp.$prefix}-popv {
		left: calc(-1 * #{tp.cssVar('container-h-padding')});
		right: calc(-1 * #{tp.cssVar('container-h-padding')});
		top: tp.cssVar('container-unit-size');
	}
}
